import React, { useEffect, useState } from 'react'

/* 
    useEffect:
        - useEffect  可以让你在函数组中执行副作用操作
        - useEffect  可以告诉React组件需要在挂载完成-更新完成-卸载完成前执行某些操作
        - useEffect 可以接受两个参数,参数一是一个回调函数,当达到条件的时候,会触发当前的回调函数
        - useEffect接受第二个参数是一个数组,这个数组有几种情况
            - 数组中如果传入state,则当前state发生改变的时候触发当前useEffect中的回调函数
            - 如果传递的是一个空数组,则useEffect回调函数只有在初始化的阶段才执行
            - 如果不传递第二个参数,则无论初始化还是更新的时候都执行

        - useEffect可以根据逻辑书写多次

        - useEffect的回调函数可以返回一个函数,当组件被卸载的时候,或者再次渲染的时候,会执行这个函数,用来收尾工作

*/

export default function App() {
  const [count,setCount]=useState(0)
  const [isHot,setIsHot]=useState(true)
  
  useEffect(()=>{
    console.log('count执行了');
  },[count])

  useEffect(()=>{
    console.log('sHot执行了');
    return () => {
      console.log("isHot的Effect卸载函数" + count);
    }
  },[isHot,count])


  return (
    <div>
      <h1>一年有{count}天</h1>
      {/* 当我们的事件函数只有一行代码的时候,可以不必专门声明一个变量再去配置一个函数,可以直接在元素的点击事件里面写事件函数 */}
      <button onClick={()=>{setCount(count+10)}}>按钮</button>
      <hr />
      <h1>今天天气真{isHot?'热啊':'冷啊'}</h1>
      <button onClick={()=>{setIsHot(!isHot)}}>改变天气</button>
    </div>
  )
}
